<template>
  <div class="scroll-table"
       :class="option.attribute.border.borderClass"
       :style="tableStyle">
    <div class="table-head" ref="thead" :style="headStyle">
      <div class="th"
           v-for="(col, index) in columns"
           v-if="!col.hidden"
           :key="col.prop + index" :style="getThStyle(col)">
        {{col.label}}
      </div>
    </div>
    <vue-seamless-scroll ref="seamlessScroll"
                         class="table-wrap"
                         :class-option="classOption"
                         :data="option.attribute.enabledScroll ? cptData : [] "
                         :style="getTbodyStyle()">
      <ul>
        <li class="tr" v-for="(row, rIndex) in cptData" :key="rIndex" :style="getTrStyle(rIndex)">
          <div class="td"
               v-for="(col, index) in columns"
               v-if="!col.hidden"
               :key="col.prop + index"
               :style="getTdStyle(col)">
            <td-value :node="tdRender(row, col, rIndex)" v-if="!col.isIndex" @click.native="clickHandler(col.prop)"/>
            <span v-else @click="clickHandler(col.prop)">{{rIndex + 1}}</span>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import refreshMixin from "@/package/widget/mixins/refreshMixin";
import {funEval, tdRenderFunStr} from "@/utils/FunUtil";
import tdValue from './td-value'

export default {
  name: 'index',
  cnName: '滚动-表格',
  mixins: [refreshMixin],
  components: {
    tdValue,
    vueSeamlessScroll
  },
  props: {
    option: Object,
    height: Number
  },
  data() {
    return {
      columns: [],
      scrollHeight: 200,
      cptData: [],
      uuid: null

    }
  },
  methods: {
    init() {
      const attribute = this.option.attribute
      this.columns = attribute.columns

      this.resize()
    },
    loadDataOk() {
      this.$nextTick(_ => {
        this.$refs.seamlessScroll.reset()
      })
    },
    resize() {
      const marginBottom = this.option.attribute.th.marginBottom
      const thHeight = this.option.attribute.th.height

      const diff = this.height - thHeight - marginBottom
      this.scrollHeight = diff

      this.loadDataOk()
    },
    getThStyle(col) {
      const style = {
      }
      if(col) {
        style.width = col.width
        style.justifyContent = col.textAlign
      }
      return style
    },
    getTdStyle(col) {
      const style = {}
      if(col) {
        style.width = col.width
        style.justifyContent = col.textAlign
        style.color = col.color
      }
      return style
    },
    getTbodyStyle() {
      const td = this.option.attribute.td
      const style = {
        background: td.backgroundColor,
        height: this.scrollHeight + 'px'
      }
      return style
    },
    getTrStyle(rowIndex) {
      const td = this.option.attribute.td
      const style = {
        fontFamily: td.fontFamily,
        color: td.color,
        height: td.height + 'px',
        fontWeight: td.fontWeight,
        fontStyle: td.fontStyle,
        fontSize: td.fontSize + 'px',
        letterSpacing: td.letterSpacing + 'px',
        background: td.backgroundColor,
        marginBottom: td.marginBottom + 'px'
      }

      if(td.backgroundImage) {
        style.background = `url(${td.backgroundImage})`
        style.backgroundSize = `100% 100%`
      }

      // 奇数行
      if(rowIndex % 2 !== 0) {
        const even = this.option.attribute.even

        style.background = even.backgroundColor || td.backgroundColor
        if(even.backgroundImage|| td.backgroundImage) {
          style.background= `url(${even.backgroundImage|| td.backgroundImage})`
          style.backgroundSize = `100% 100%`
        }
      }

      return style
    },
    tdRender(row, col, rIndex) {
      return (h) => {
        let val = row[col.prop]
        if(this.renders[col.prop]) {
          val =  this.renders[col.prop](h, row, col, rIndex)
        }
        return h('div', {}, [val])
      }

    },
    clickHandler(key) {
      this.$emit("clickHandler", this.option.interaction, key, this.cptData.value)
    }
  },
  watch: {
    'option.attribute': {
      handler() {
        this.init()
      },
      deep: true
    },
    height() {
      this.resize()
    }
  },
  computed: {
    tableStyle() {
      const border = this.option.attribute.border
      const style = {}
      style['--table-bd-color'] = border.borderColor

      return style
    },
    headStyle() {
      const th = this.option.attribute.th

      const style = {
        fontFamily: th.fontFamily,
        color: th.color,
        height: th.height + 'px',
        fontWeight: th.fontWeight,
        fontStyle: th.fontStyle,
        fontSize: th.fontSize + 'px',
        letterSpacing: th.letterSpacing + 'px',
        background: th.backgroundColor,
        marginBottom: th.marginBottom + 'px'
      }

      if(th.backgroundImage) {
        style.background = `url(${th.backgroundImage})`
        style.backgroundSize = `100% 100%`
      }
      return style
    },
    renders() {
      const renders = {}
      this.columns.forEach(col => {
        if(col.render && col.render.trim() !== tdRenderFunStr.trim()) {
          renders[col.prop] = funEval(col.render)
        }
      })
      return renders
    },
    classOption() {
      return this.option.attribute.scroll
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
.scroll-table {
  position: relative;
  height: 100%;
  color: #FFF;

  --table-bd-color: #3b4c7d;

  &.bottom-border {

    .table-head {
      border-bottom: 1px solid var(--table-bd-color);
    }

    .table-wrap {
      .tr {
        border-bottom: 1px solid var(--table-bd-color);
      }
    }
  }

  &.all-border {
    .table-head {
      border: 1px solid var(--table-bd-color);

      .th:not(:last-child) {
        border-right: 1px solid var(--table-bd-color);
      }
    }
    .table-wrap {
      .tr {
        border: 1px solid var(--table-bd-color);
        border-top: 0;
      }
      .td:not(:last-child) {
        border-right: 1px solid var(--table-bd-color);
      }
    }
  }

  .table-head {
    display: flex;
    align-items: center;

    .th {
      display: flex;
      align-items: center;
      padding: 0 10px;
      height: 100%;
    }
  }

  .table-index {
    width: 80px;
    padding: 0 10px;
  }

  .table-wrap {
    overflow: hidden;
  }

  .tr {
    display: flex;

    .td {
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
